<template>
	<view class="goodsCategory">
		<div class="top">
			<uniSearchBar placeholder="商品名称搜索" placeholder-style="color: #CCCCCC;" radius="36" cancelButton="none" v-model="keywords"></uniSearchBar>
			<label @click="searchFun()">搜索</label>
		</div>
		<view class="con">
			<scroll-view scroll-y="true" class="left">
				<view :class="index==selIndex?'item check':'item'" v-for="(item,index) in categoryList" :key="index" @click="selCateFun(index)">
					<text>{{item.title}}</text>
					<image v-if="index==selIndex" class="sel" src="https://hdsq.aoorange.cn/attachment/xcx/index/icon_index_tabbar_check.png" mode="widthFix"></image>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right" @scrolltolower="moreList()">
				<view class="goods" v-for="(item,index) in pageResult.list" :key="index" @click="jump('product_view', 'id='+item.id+'&storeType='+pageParam.storeType)">
					<view class="left_item">
					<image :src="item.picture" mode="widthFix"></image>
					</view>
					<view class="right_item">
						<view class="right_con" style="height: 138rpx; line-height: 46rpx;">
							<text class="state" style="background:rgba(235, 89, 56, 1);">{{item.reductionName}}{{item.isReduction == 1 ? '满减' : ''}}</text>
							<text class="oneline name">{{item.name}}</text>
						</view>
						<view class="right_con">
							<text class="rate">￥{{item.minPrice + (item.minPrice != item.maxPrice ? ' - ' + item.maxPrice : '')}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				selIndex: 0,
				categoryList:[],
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					cateId: 0,
					keywords: '',
					page: 0,
					mainType: 0,
					storeType : 1,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				keywords: '',
			}
		},
		methods: {
			getCategoryList() {
				serve.request({
					url: '/store/product/category-list',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						mainType: _self.pageParam.mainType,
						storeType: _self.pageParam.storeType
					},
					v: '/v2',
				}).then(res => {
					_self.categoryList = res.data;
				});
			},
			getProductList() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				_self.pageParam.page++
				serve.request({
					url: '/store/product/list',
					data: _self.pageParam,
					v: '/v2',
				}).then(res => {
					uni.hideLoading();
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			selCateFun(key) {
				_self.selIndex = key;
				var item = _self.categoryList[key];
				_self.pageParam.cateId = item.id;
				_self.pageParam.page = 0;
				_self.pageResult.list = [];
				_self.getProductList();
			},
			searchFun(){
				let kw = _self.keywords.value;
				_self.pageParam.keywords = kw;
				_self.pageParam.page = 0;
				_self.pageResult.list = [];
				_self.getProductList();
			},
			moreList(){
				if(_self.pageResult.isEnd || _self.pageResult.isEmpty){
					return
				}
				_self.getProductList();
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			_self = this;
			_self.pageParam.mainType = options.mainType || 0;
			_self.pageParam.storeType = options.storeType || 1;
			_self.getCategoryList();
			_self.getProductList();
		},
		onPullDownRefresh() {
			_self.categoryList = [];
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getCategoryList();
			_self.getProductList();
		}
	}
</script>

<style scoped lang="scss">
	.goodsCategory{
		min-height: 100vh;
		.top {
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			color: #3333ff;
		
			.uni-searchbar {
				flex: 1;
			}
		
			label {
				font-size: 32rpx;
				margin-left: 47rpx;
			}
		}
	    .con{
			display: flex;
			.left{
				height: calc(100vh - 169rpx);
				width: 180rpx;
				border: 1rpx #EBEBEB solid;
				.item {
					width: 100%;
					color: #666666;
					font-size: 24rpx;
					display: inline-block;
					vertical-align: middle;
					line-height: 100rpx;
					height: 100rpx;
					text-align: center;
					border-bottom: 1rpx #EBEBEB solid;
					border-collapse:collapse;
					position: relative;
					z-index: 0;
					text{
						position: relative;
						z-index: 5;
					}
					.sel {
						width: 78rpx;
						position: absolute;
						left: 50rpx;
						bottom:20rpx ;
						z-index: 2;
					}
				}
				.check{
					font-weight:bold ;
					color: #3333FF;
					background: #F7F7F7;
				}
				
				
			}
		    .right{
				width: 570rpx;
				height: calc(100vh - 169rpx);
				background: rgba(204,204,204,0.15);
				
				.goods{
					display: flex;
					box-sizing: border-box;
					align-items: flex-start;
					padding: 20rpx;
					border-bottom: 1px solid #ebebeb;
					.left_item {						
						margin-right: 15rpx;
						image {
							width:180rpx;
							height:180rpx;
						}
					}
					
					.right_item {
						flex: 1;
						.right_con{
							// display: flex;
							// align-items: center;
							// position: relative;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							line-clamp: 3;
							-webkit-box-orient: vertical;
							white-space:unset;
							.oneline{
								
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
								white-space:unset;
							}
							.name{
								display: initial;
								max-width: 300rpx;
								font-size: 34rpx;
							}
							.rate{
								color: #FFBC00;
								font-size: 30rpx;
								margin-top: 10rpx;
							}
							.state{
								display: initial;
							    padding: 5rpx 8rpx;
							    text-align: center;
							    color: #FFFFFF;
							    font-size: 32rpx;
							    border-radius:2rpx;
							    margin-right: 10rpx;
							}
						}
					}
				}
			}
		}
		.through {
			text-decoration:line-through;
			color: #999999 !important;
		}
	}
</style>